<!DOCTYPE>
<html>
<meta charset="utf-8"/>
<title>WebSocket Test</title>
<script src="http://cdn.bootcss.com/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
    var $URL = "__APP__/Html5/WorkerMan/handleMessage";
    var wsUri = "ws://120.26.2.3:8283";
    var output;
    var $clientId;

    function init() {
        output = document.getElementById("output");
        testWebSocket();
//        websocket.send("hello \n");
    }

    function testWebSocket() {
        websocket = new WebSocket(wsUri);
        websocket.onopen = function (evt) {
            onOpen(evt)
        };
        websocket.onclose = function (evt) {
            onClose(evt)
        };
        websocket.onmessage = function (evt) {
            onMessage(evt)
        };
        websocket.onerror = function (evt) {
            onError(evt)
        };
    }
    function onOpen(evt) {
        writeToScreen("CONNECTED");
    }

    function onClose(evt) {
        writeToScreen("DISCONNECTED");
    }

    function onMessage(evt) {

        writeToScreen('<span style="color: blue;">RESPONSE: ' + evt.data + '</span>');
        var obj = toJson(evt.data);
        $clientId = obj.clientId;
        console.log(obj.content);
        $("#message").append('['+JSON.stringify(obj.publish_time)+"]=>"+obj.clientId+" said: "+JSON.stringify(obj.content))
//        switch (type) {
//            case "connect":
//                writeToScreen('<span style="color: blue;">RESPONSE: ' + evt.data + '</span>');
//                clientId = obj.clientId;
//                //alert("得到的客户端的ID："+clientId);
//                forExample();
//                break;
//            default:
//                writeToScreen('<span style="color: blue;">RESPONSE: ' + evt.data + '</span>');
//                break;
//        }
    }

    function onError(evt) {
        writeToScreen('<span style="color: red;">ERROR:</span> ' + evt.data);
    }

//    function forExample() {
//        var myJsonStr = setJson(myJsonStr, "clientId", clientId);
//        myJsonStr = setJson(myJsonStr, "type", "say");
//        myJsonStr = setJson(myJsonStr, "userId", "565081");
//        myJsonStr = setJson(myJsonStr, "userName", "龙隆蟀舞");
//        myJsonStr = setJson(myJsonStr, "userImage", "http:\/\/wx.qlogo.cn\/mmopen\/eMWJkc6M6KoWxQqLKuGfPjxRPGO3SmMjeY0I0jJ6WTdGwaEuBm6Z42SsHtVG3afwD71HLb0ZBV8DepIYGVDdVVscQdyQ4siax\/0");
//        myJsonStr = setJson(myJsonStr, "roomId", "005");
//        myJsonStr = setJson(myJsonStr, "message", "哇哈哈哈哈");
//        myJsonStr = setJson(myJsonStr, "time", "1470300123908");
//        writeToScreen("EXAMPLE: " + myJsonStr);
//    }

    function writeToScreen(message) {
        var pre = document.createElement("p");
        pre.style.wordWrap = "break-word";
        pre.innerHTML = message;
        output.appendChild(pre);
    }

    //添加或者修改json数据
    function setJson(jsonStr, name, value) {
        if (!jsonStr)jsonStr = "{}";
        var jsonObj = JSON.parse(jsonStr);
        jsonObj[name] = value;
        return JSON.stringify(jsonObj)
    }

    function toJson(str) {
        var json = eval('(' + str + ')');
        return json;
    }

    function sub()
    {
        $data = {
            'clientId': $clientId,
            'content':$("#data").val(),
            'token':$("#token").val()
        };
        var success = function(response)
        {
            if(response.status == 200)
            {
                $("#message").append(response.content);
            }
            console.log(response);
        }
        $.post($URL,$data,success,'json');
    }
    window.addEventListener("load", init, false);

    //    function serializeForm(){
    //        return $('#results').html(toJson($("form").serializeArray));
    //    }
    //
    //    console.log(serializeForm());
</script>

<h2>WebSocketDemo</h2>
token：<input type="text" name="token" id="token"><p></p>
数据：<input type="text" style="height: 50px; width: 100%;" name="data" id="data"><p></p>
<button id="submit" onclick="sub()" >提交</button> <p></p>
<!--<button id="submit" onclick="forExample()" >JSON数据</button> <p></p>-->

<div id="output"></div>
<div id="message"></div>
</html>
